<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="try1.css" rel="stylesheet" type="text/css" /><!--[if IE]>

<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColHybLtHdr #sidebar1 { padding-top: 30px; }
.twoColHybLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it may need to avoid several bugs */
</style>
<![endif]-->


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.tools.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.address-1.4.min.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>

<script type="text/javascript" src="javascript/interface.js"></script>
<script>
/*
			jQuery(document).ready(
				function() {
					jQuery('#myAccordion').Accordion({
						headerSelector	: 'dt',
						panelSelector	: 'dd',
						activeClass		: 'myAccordionActive',
						hoverClass		: 'myAccordionHover',
						panelHeight		: 230,
						speed			: 300
					});
				});*/
			jQuery(document).ready(
				function() {
					
					$("#myform2").submit(function() {
						addItemsToForm();
					}); 
					jQuery(function($) { $('#myAccordion').Accordion({
						headerSelector	: 'dt',
						panelSelector	: 'dd',
						activeClass		: 'myAccordionActive',
						hoverClass		: 'myAccordionHover',
						panelHeight		: 230,
						speed			: 300
					}); });
					$.address.history(false).strict(false).change(function(event){																	
						var tab = event.value;					
						(tab=='biz') ? changeSignIn('business') : changeSignIn('customer');
						(tab=='joinbiz') ? visiableMain('joinbiz') : hiddenMain('joinbiz');
						(tab=='home' || tab=='' || tab=='biz' || tab=='custom') ? visiableMain('home') : hiddenMain('home');
						(tab=='join') ? visiableMain('join') : hiddenMain('join');
						(tab=='customers') ? visiableMain('customers') : hiddenMain('customers');
						(tab=='about') ? visiableMain('about') : hiddenMain('about');
   					}).history(true);
					
					$("#nextButton").click(function(){
						
						$(this).parent().find("#firstForm").css("visibility","hidden").css("position","fixed");
						$(this).parent().find("#secondForm").css("visibility","").css("position","");
						$(this).parent().find("p").html("stage 2 of 2");
						$(this).parent().find("#prevButton").css("opacity" ,"1");
						$(this).parent().find("#nextButton").css("opacity" ,"0.7");
					});
					$("#prevButton").click(function(){
					
						$(this).parent().find("#firstForm").css("visibility","").css("position","");
						$(this).parent().find("#secondForm").css("visibility","hidden").css("position","fixed");
						$(this).parent().find("p").html("stage 1 of 2");
						$(this).parent().find("#nextButton").css("opacity" ,"1");
						$(this).parent().find("#prevButton").css("opacity" ,"0.7");
					
					});
					$("#statusAddButton").click(function(){
						addItem('status',$(this));
						//if($(this).parent().find("#status").val()=="") return false;
						//var num  = $('#statusList').find('li').size();
						//var newNum  = new Number(num + 1);
						//var val = $(this).parent().find("#status").val();
						//$(this).parent().find("#statusList").append('<li id="statusItem'+newNum+'"><input type="hidden" value="'+val+'" name="statusItem'+newNum+'"/>'+val+' '+newNum+'</li>');
						//$(this).parent().find("#status").val("").focus();
					});
					$("#statusRemoveButton").click(function(){	
						removeItem('status',$(this));
						//var num  = $('#statusList').find('li').size();
						//$(this).parent().find("#statusItem"+num).remove();
						//$(this).parent().find("#status").val("").focus();
					});
					$("#messageAddButton").click(function(){
						//if($(this).parent().find("#message").val()=="") return false;
						//var num  = $('#messageList').find('li').size();
						//var newNum  = new Number(num + 1);
						//var val = $(this).parent().find("#message").val();
						//$(this).parent().find("#messageList").append('<li id="messageItem'+newNum+'"><input type="hidden" value="'+val+'" name="messageItem'+newNum+'"/>'+val+' '+newNum+'</li>');
						//$(this).parent().find("#message").val("").focus();
						addItem('message',$(this));
					});
					$("#messageRemoveButton").click(function(){	
						removeItem('message',$(this));
						//var num  = $('#messageList').find('li').size();
						//$(this).parent().find("#messageItem"+num).remove();
						//$(this).parent().find("#message").val("").focus();
					});
					$("#myform2 input[title]").tooltip({
										 
						// place tooltip on the right edge
						position: "center right",
					
						// a little tweaking of the position
						offset: [-2, 10],
					
						// use the built-in fadeIn/fadeOut effect
						effect: "fade",
					
						// custom opacity setting
						opacity: 0.7
					
					});
					
					$("#sortable").sortable();
					order = $("#sortable").sortable('serialize',{attribute:'name'});
					$("#sortable").disableSelection();
					
					
				}
				
			);
			var visiableMain = function(tab){
				
				$('#mainContent #'+tab).attr('class','');
				$('#menu #'+tab).attr('class','choosenButton');
			}
			
			var hiddenMain = function(tab){
				
				$("#mainContent #"+tab).attr('class','hiddenMain');
				$('#menu #'+tab).attr('class','');
			}
			var changeSignIn = function(tab){
				$("#signIn #type").attr("value",tab);
				(tab=="business") ? $("#signIn h3").html("Business Sign In") : $("#signIn h3").html("Sign In");
				(tab=="business") ? $("#signIn h4:last").html("Customer? Sign in here") : $("#signIn h4:last").html("Business? Sign in here");
				(tab=="business") ? $("#signIn a:last").attr("href","#custom") : $("#signIn a:last").attr("href","#biz");
			}
			var addItem = function(name,elem){
				if(elem.parent().find("#"+name).val()=="") return false;
				var num  = $('#'+name+'List').find('li').size();
				var newNum  = new Number(num + 1);
				var val = elem.parent().find("#"+name).val();
				elem.parent().find("#"+name+"List").append('<li id="'+name+'Item'+newNum+'"><input type="hidden" value="'+val+'" name="'+name+'Item'+newNum+'"/>'+val+'</li>');
				elem.parent().find("#"+name).val("").focus();
			}
			
			var removeItemOld = function(name,elem){
				var num  = $('#'+name+'List').find('li').size();
				elem.parent().find('#'+name+'Item'+num).remove();
				elem.parent().find('#'+name).val("").focus();
			}
			var getSortOrder = function(){
				var x='';
				$.each($("#sortable").sortable('toArray'), function(index,value){
						x=x+'index '+index+': '+value+'\n';
					});
				return x;
			 }
			var addItemsToForm = function(){
				$.each($("#sortable").sortable('toArray'), function(index,value){
						//$("#myform2").append("<input type='hidden' id='list_"+index +"' name='list_"+index +"' value='"+value+"'/>");
					$('<input />').attr('type', 'hidden')
		            .attr('name', 'list_'+index)
		            .attr('value', value)
		            .appendTo('#myform2');
					});
				
			 } 
			 var removeItem = function(x){
				 $(x).remove();
				 
			 }
			 var addItem = function(){
				 if($("#t").val()!=''){
				 	$("#sortable").append('<li id="list_'+$("#t").val().replace(/ /g,'@')+'">'+$("#t").val()+'   <a href="" onclick="removeItem(list_'+$("#t").val()+'); return false;">     remove</a></li>');
				 	$("#t").val('');
				 }
			 }
		</script>

</head>

<body class="twoColHybLtHdr">

<div id="container">
  <div id="header">
		<div id="logo">
        	Synca
        </div>    		
        <div class="menu_nav">
                <ul id="menu">
                    <a href="#home"><li id="home">Home</li></a>
                    <a href="#join"><li id="join">Join</li></a>
                    <a href="#customers"><li id="customers">Customers</li></a>
                    <a href="#about"><li id="about">About</li></a>
                </ul>
            </div>
  <!-- end #header --></div>
  <div id="sidebar1">
    <div>
    	<dl id="myAccordion">
            
            <dt class="someClass">Sign In</dt>
            <dd>
                <form id="signIn" action="logIn" method="POST">
                    <label> User Name:</label>
                    <input type="text" name="username" />
                    <label> Password:</label>
                    <input type="password" name="password" />
                    <input id="type" name="type" type="hidden" value="customer"/>
                    <h5></h5>
                    <center><button type="submit">Log In</button></center>
                    
                    <a href=""><h4>Forgot your password? </h4></a>
                    <a href="#biz"><h4>Business? Sign in here</h4></a>
                </form>
            </dd>
            <dt class="someClass">Find My Order</dt>
            <dd>
                <form id="FindOrder" action="#" method="GET">
                    <label> Company Name:</label>
                    <select name="Comp">
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select><br /><br />
                    <label> Order Number:</label>
                    <input type="text" name="OrderNum" />
                    <h5>
                    </h5>
                    <center><button type="submit">Find</button></center>
                </form>
            </dd>
            
        </dl>
    </div>
    
  <!-- end #sidebar1 --></div>
  <div id="mainContent">
    <div id="home">
                	<p>"Synca" is web application that allows you,the business owner, to follow your customers orders via web and control orders status.

in addition,customer that sign in to "Synca" service will be able to follow his orders via web\mobile and see the current status of his orders.</p>

<p>if you are a business owner, join us for a better purchesing experience for you and your coustomers.

Synca team.</p>
                </div>
				<div id="join">
                    <a href="#joinbiz">New Business? Join here</a>
                    <center>
                	<div id="stylized" class="myform1">
                    <form id="myform3" method="post" action="createAccountClient">
                    <h1>Sign-up form</h1>
                    <p></p>

                    <div id="firstForm">
                    <label>User Name
                    
                    </label>
                    <input type="text"  id="userName" name="userName" title="select free user name"/>
                    
                    <label>Password
                    
                    </label>
                    <input type="password"  id="password" name="password" title="choose password"/>
                    
                    <label>Confirm Password
                    
                    </label>
                    <input type="password" id="password1" name="password1" title="confirm the password"/>
                    
                    <label>Email
                    
                    </label>
                    <input type="text"  id="email" name="email" title="In this email you will get confirmation about the registration"/>
                    
                    <label>Phone Number
                    
                    </label>
                    <input type="text"  id="phone"  name="phone" title="fiil your phone number"/>
                    </div>
                                     
           
                    <button class="formButton" type="submit" id="submitButton" >Send</button>
                    <div class="spacer"></div>
                    
                    </form>
                </div>
                </center>       
                </div>
                <div id="joinbiz">
                	<center>
                	<div id="stylized" class="myform1">
                    <form id="myform2" method="post" action="CreateAccountBusiness2">
                    <h1>Business Sign-up form</h1>
                    <p>stage 1 of 2</p>

                    <div id="firstForm">
                    <label>User Name
                    
                    </label>
                    <input type="text"  id="userName" name="userName" title="select free user name"/>
                    
                    <label>Password
                    
                    </label>
                    <input type="password"  id="password" name="password" title="choose password"/>
                    
                    <label>Confirm Password
                    
                    </label>
                    <input type="password" id="password1" name="password1" title="confirm the password"/>
                    
                    <label>Email
                    
                    </label>
                    <input type="text"  id="email" name="email" title="In this email you will get confirmation about the registration"/>
                    
                    <label>Business Name
                    
                    </label>
                    <input type="text"  id="businessName" name="businessName" title="This business name the customer will see"/>
                    
                    <label>Business Number
                    
                    </label>
                    <input type="text"  id="businessNumber" name="businessNumber" title="fiil your business number"/>
                    <label>Phone Number
                    
                    </label>
                    <input type="text"  id="phone"  name="phone" title="fiil your phone number"/>
                    </div>
                    <div id="secondForm" style="visibility:hidden; position:fixed;">

                        <!-- <label>Picture
                        
                        </label>
                        <input type="file"  id="logo" name="logo" title="choose password"/> -->
                        <label>Business Type</label>
                        <select>
                        	<option id="res">Restaurant</option>
                        	<option id="del">Delivery</option>
                        </select>
                        <br></br>
                        <div class="listDiv">
                            <!-- <ul id="statusList" class="statusList">
                            </ul>
                            <label>Next Status</label>
                            <input type="text" id="status"  />
                            <div class="list" id="statusRemoveButton">
                                <img src="remove.png"/>
                            </div>
                            <div class="list" id="statusAddButton">
                                <img src="add2.png"/>
                            </div> -->
                            <ul id="sortable"></ul>
                            <input type="text" id="t" /><br><input type="button" onClick="addItem();" value="Add"/>
                        </div>
                        <div class="listDiv">
                            <ul id="messageList" class="statusList">
                            </ul>
                            <label>Next Message</label>
                            <input type="text" id="message" />
                            <div class="list" id="messageRemoveButton">
                                <img src="remove.png"/>
                            </div>
                            <div class="list" id="messageAddButton">
                                <img src="add2.png"/>
                            </div>
                        </div>
                    </div>
                   
                    
                    <button class="formButton" type="button" id="prevButton" title="sdad" style="opacity:0.7;">Prev</button>
                    <button class="formButton" type="button" id="nextButton" title="sdad">Next</button>
                    <button class="formButton" type="submit" id="submitButton" name="qwe">Send</button>
                    <div class="spacer"></div>
                    
                    </form>
                </div>
                </center>
                </div>
                <div id="customers">
                	Comming soon...
                </div>
                <div id="about">
                	<p>this application was builld as a part of  a workshop of google
for third year seniors in bar ilan university.</p>
                </div>

	<!-- end #mainContent --></div>
	<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
	<br class="clearfloat" />
	
<!-- end #container --></div>
<div id="footer">
    <p>© Copyrights reserved for "Synca" Team</p>
    
  <!-- end #footer --></div>
</body>
</html>
